<template>
  <!-- 宽度100% -->
  <p style="height: 1px; margin-top: 20px">
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
  </p>

  <!-- 折叠展开按钮 -->
  <div style="border-top: 1px solid #dcdfe6; padding: 5px">
    <div @click="show = !show">
      错误详情
      <el-icon>
        <template v-if="show">
          <ArrowUp />
        </template>
        <template v-else>
          <ArrowDown />
        </template>
      </el-icon>
    </div>
  </div>

  <el-collapse-transition
    style="
      background-color: #f7f7f7;
      color: var(--el-text-color-primary);
      border-top: 1px solid #dcdfe6;
      border-bottom: 1px solid #dcdfe6;
      padding: 5px 0;
    "
  >
    <div v-show="show">
      <div v-if="props.code">
        <span>【后端返回状态码】</span>
        <ElText>{{ props.code }}</ElText>
      </div>
      <div v-if="props.url">
        <span>【请求异常地址】</span>
        <ElText>{{ props.url }}</ElText>
      </div>
      <div v-if="props.msg">
        <span>【请求异常信息】</span>
        <ElText>{{ props.msg }}</ElText>
      </div>
    </div>
  </el-collapse-transition>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const props = defineProps<{
  msg?: string
  code?: string
  url?: string
}>()

const show = ref(false)
</script>

<style scoped></style>
